import React from 'react';
import {Menu, Row, Col, Icon, Button} from 'antd';

import cookie from 'js-cookie';


class HeadContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
    };
  }

  componentWillMount() {
    var expires = new Date(new Date().getTime() + 30 * 60 * 1000);
    cookie.set('username', 'quemf', { expires: expires });
    var username = cookie.get('username');
    if (username == null) {
      window.location.href = '/login';
    } else {
      this.setState({
        username: username,
      })
    }
  }

  onLogoutClick() {
    cookie.remove('username')
    window.location.href = '/login';
  }

  handleHomeClick() {
    window.location.href = '/';
  }

  handleClick(e) {
    if (e.key == 1) {
      window.location.href = '/subject';
    } else if (e.key == 2) {
      window.location.href = '/dictionary';
    } else if (e.key == 3) {
      window.location.href = '/image';
    } else if (e.key == 4) {
      window.location.href = '/bind';
    } else if (e.key == 5) {
      window.location.href = '/show';
    } else if (e.key == 6) {
      window.location.href = '/search';
    } else if (e.key == 7) {
      window.location.href = '/changelog';
    }
  }


  render() {
    return (
      <div>
        <Row>
          {/*<Col span={4}><h1>数据地图</h1></Col>*/}
          <Col span={4}>
            <h5>
              <Button type="ghost"
                      onClick={this.handleHomeClick.bind(this)}
                      style={{color: '#FFFFFF', background: '#3E4959', border: 0}}>
                <span style={{fontFamily: '微软雅黑', fontSize: '26px', fontWeight: 'bold'}}>数据地图</span>
              </Button>
            </h5>
          </Col>
          <Col span={18}>
            <h5>
              <Menu onClick={this.handleClick.bind(this)}
                    selectedKeys={[this.props.current]}
                    mode="horizontal"
                    style={{color: '#FFFFFF', background: '#3E4959', border: 0}}
              >
                <Menu.Item key="1">
                  <Icon type="windows"/>
                  <span style={{fontFamily: '微软雅黑', fontSize: '17px', fontWeight: 'bold'}}>主题管理</span>
                </Menu.Item>
                <Menu.Item key="2">
                  <Icon type="book"/>
                  <span style={{fontFamily: '微软雅黑', fontSize: '17px', fontWeight: 'bold'}}>字典管理</span>
                </Menu.Item>
                <Menu.Item key="3">
                  <Icon type="cloud-download"/>
                  <span style={{fontFamily: '微软雅黑', fontSize: '17px', fontWeight: 'bold'}}>镜像状态</span>
                </Menu.Item>
                <Menu.Item key="4">
                  <Icon type="lock"/>
                  <span style={{fontFamily: '微软雅黑', fontSize: '17px', fontWeight: 'bold'}}>数据绑定</span>
                </Menu.Item>
                <Menu.Item key="5">
                  <Icon type="file-text"/>
                  <span style={{fontFamily: '微软雅黑', fontSize: '17px', fontWeight: 'bold'}}>数据详情</span>
                </Menu.Item>
                <Menu.Item key="6">
                  <Icon type="search"/>
                  <span style={{fontFamily: '微软雅黑', fontSize: '17px', fontWeight: 'bold'}}>数据搜索</span>
                </Menu.Item>
                <Menu.Item key="7">
                  <Icon type="rocket"/>
                  <span style={{fontFamily: '微软雅黑', fontSize: '17px', fontWeight: 'bold'}}>更新日志</span>
                </Menu.Item>
              </Menu>
            </h5>
          </Col>
          <Col span={2}>
            <h5>
              <br/>
              <Button type="ghost" icon="user"
                      onClick={this.handleHomeClick.bind(this)}
                      style={{color: '#FFFFFF', background: '#3E4959', border: 0}}>
                <span style={{fontFamily: '微软雅黑', fontSize: '14px', fontWeight: 'bold'}}>{this.state.username}</span>
              </Button>
              <Button type="ghost" icon="poweroff"
                      style={{color: '#FFFFFF', background: '#3E4959', border: 0}}
                      onClick={this.onLogoutClick.bind(this)}>
              </Button>
            </h5>
          </Col>
        </Row>
      </div>
    );
  }
}

export default HeadContainer;
